<template>
  <div class="dataClass">
    <el-select size="small" placeholder="调查对象分类" v-model="bigCategoryId" @change="refresh">
      <el-option
          v-for="item in BigCategory"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-table
        :data="tableData"
        row-key="id"
        border
        style="width: 100%;margin-top: 10px"
        :header-cell-style="cellStyle"
        :header-row-style="{background:'#DCDFE6'}"
        :span-method="objectSpanMethod"
    >
      <!-- 区划信息 -->
      <el-table-column
          prop="bigCategoryName"
          label="调查对象大类"
          align="center"
          min-width="100"
      />
      <el-table-column
          prop="midCategoryName"
          label="调查对象中类"
          align="center"
          min-width="100"
      />

      <!-- 预置数据相关列 -->
      <el-table-column
          prop="categoryName"
          label="调查对象小类"
          align="center"
          min-width="100"
      >
      </el-table-column>
      <el-table-column
          prop="precastCount"
          label="预制数据总量"
          align="center"
          min-width="100"
      />
      <el-table-column
          prop="precastUpdateCount"
          label="预制数据-核实更新"
          align="center"
          min-width="100"
      />

      <!-- 调查新增相关列 -->
      <el-table-column
          prop="precastUnChangeCount"
          label="预制数据-核实不变"
          align="center"
          min-width="100"
      >
      </el-table-column>
      <el-table-column
          prop="precastNotVerifiedCount"
          label="预制数据-未核实"
          align="center"
          min-width="100"
      />
      <el-table-column
          prop="precastCancelCount"
          label="预制数据-已核销"
          align="center"
          min-width="140"
      />

      <!-- 进度相关列 -->
      <el-table-column
          prop="addCount"
          label="新增调查数据总量"
          align="center"
          min-width="120"
      />
    </el-table>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import { categoryStatistic } from '@/api/investDataCommon';
import {Getter} from "vuex-class";
@Component
export default class DataClass extends Vue {
  @Getter('BigCategory') private BigCategory: any;
  tableData: any = []
  bigCategoryId: any = ''
  options = []
  @Prop() private row:any
  refresh(){
    categoryStatistic({...this.row,bigCategoryId:this.bigCategoryId}).then(res =>{
      if(res && res.data){
        this.tableData = res.data;
      }
    }).catch(e =>{
      console.error(e);
    })
  }
  cellStyle({ row, column }) {
    return {
      color: '#333333'
    }
  }
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0 || columnIndex===1) { // 第一列：调查对象大类
      if (rowIndex === 0) {
        return {
          rowspan: this.tableData.length,
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dataClass{
  overflow: auto;
}
</style>
